<template>
  <view class="page">
    <!-- 		<navigator open-type="navigate" url="/pages/login/login">
			<button>登录页</button>
		</navigator> -->
    <button @click="handleLogin">登录</button>

    <!-- <view @click="kehu">我的客户</view>
		<view @click="dingdan">订单</view>
		<view @click="fenhonsg">分红</view>
		<view @click="dailishang">代理商管理</view>
		<view @click="xiaoliang">销量商管理</view>
		<view @click="mingpian">名片</view> -->

    <!-- 手机号快捷登录 -->
    <up-popup :round="10" :show="show" @close="close" @open="open">
      <view class="wrap padding-top-34">
        <image
          @click="close"
          class="close-img"
          src="/static/img/login/close.png"
          alt="" />
        <view class="logo s-flex-r-c-c">
          <image class="img" src="/static/img/login/title.png" alt="" />
        </view>
        <button
          class="btn s-flex-r-c-c"
          open-type="getPhoneNumber"
          @getphonenumber="getUserPhone">
          手机号快捷登录
        </button>
        <view class="xieyi s-flex-r-c-c">
          <text>请勾选相关协议</text>
          <view class="jiao"></view>
        </view>
        <view class="t-xieyi s-flex-r-s-c">
          <image
            @click="checked = !checked"
            v-if="checked"
            class="icon circle"
            src="/static/img/login/yes.png"
            alt="" />
          <view @click="checked = !checked" v-else class="circle"></view>
          <view class="text">
            我已阅读并同意
            <text class="t">《用户协议》</text>
            与
            <text class="t">《隐私协议》</text>
          </view>
        </view>
        <view class="other-login s-flex-r-c-c">
          <view
            class="item s-flex-c-s-c"
            @click="go('/pages/login/login?loginType=1')">
            <image class="icon" src="/static/img/login/dun2.png" alt="" />
            <text>验证码登录</text>
          </view>
          <view
            class="item s-flex-c-s-c"
            @click="go('/pages/login/login?loginType=2')">
            <image class="icon" src="/static/img/login/account.png" alt="" />
            <text>账号密码登录</text>
          </view>
        </view>
      </view>
    </up-popup>
    <!-- 获取验证码 -->
    <up-popup :show="show2" @close="close2" @open="open2">
      <view class="wrap2 padding-top-54">
        <image
          @click="close2"
          class="close-img"
          src="/static/img/login/close.png"
          alt="" />
        <view class="title">填写手机短信验证码</view>
        <view class="toast s-flex-r-b-c padding-lr-50">
          <view class="left">
            已发送至{{ phoneNumber.slice(0, 3) }}****{{
              phoneNumber.slice(7, 12)
            }}
          </view>
          <view class="send" @click="sendCode">{{ getCode }}</view>
        </view>
        <view class="code-box s-flex-c-c-c">
          <up-code-input
            class="code"
            @change="change2"
            v-model="value"
            @finish="finish"
            disabled-keyboard
            borderColor="#6DDA47"
            :maxlength="4"></up-code-input>
        </view>
        <view class="code-box s-flex-c-c-c">
          <u-number-keyboard
            @backspace="backspace"
            @change="change"
            mode="number"
            :dotDisabled="false"></u-number-keyboard>
        </view>
      </view>
    </up-popup>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
const checked = ref(true);
const timerFlag = ref(false);
const loginType = ref(1);
// 手机号快捷登录
const show = ref(false);
const phoneNumber = ref("");
const access_token = ref("");
const value = ref(""); // 输入框的值
const wxLoginForm = ref({
  code: "",
  encryptedIv: "",
  encryptedData: "",
});
const handleLogin = () => {
  show.value = true;
};
const close = () => {
  show.value = false;
};
const open = () => {
  show.value = true;
};
// 获取验证码
const show2 = ref(false);
const kehu = () => {
  uni.navigateTo({
    url: "/pages/my/kehu/wode_kehu/wode_kehu",
  });
};
const dingdan = () => {
  uni.navigateTo({
    url: "/pages/my/dingdan/wode_dingdan/wode_dingdan",
  });
};
const fenhonsg = () => {
  uni.navigateTo({
    // url: 'pages/my/fenhong/wode_fenhong/wode_fenhong'
    url: "/pages/my/fenhong/wode_fenhong/wode_fenhong",
  });
};
const dailishang = () => {
  uni.navigateTo({
    // url: 'pages/my/fenhong/wode_fenhong/wode_fenhong'
    url: "/pages/my/daili_shang/daili_shang_gl/daili_shang_gl",
  });
};
const xiaoliang = () => {
  uni.navigateTo({
    url: "/pages/my/xiao_liang/xiaoliang_guanli/xiaoliang_guanli",
  });
};
const mingpian = () => {
  uni.navigateTo({
    url: "/pages/my/ming_pian/ming_pian",
  });
};
const close2 = () => {
  show2.value = false;
};
const open2 = () => {
  show2.value = true;
};

const getCode = ref("发送验证码");
function sendCode() {
  if (!/[0-9]{11}/.test(phoneNumber.value)) {
    uni.showToast({
      icon: "none",
      title: "请输入正确的手机号",
    });
    return;
  }
  if (timerFlag.value === false) {
    proxy
      .$request({
        url: "api/sms/send",
        header: "application/x-www-form-urlencoded",
        data: {
          mobile: phoneNumber.value,
          event: "mobilelogin",
        },
      })
      .then((res) => {
        if (res.code == 0) {
          return proxy.$toast(res.msg);
        } else {
          timerFlag.value = !timerFlag.value;
          uni.showToast({
            icon: "none",
            title: res.msg,
          });
          countDown(60);
        }
      });
  }
}
function countDown(time) {
  let count = time;
  setTimeout(() => {
    count--;
    if (time <= 0) {
      getCode.value = "获取验证码";
      timerFlag.value = false;
    } else if (count !== time) {
      getCode.value = "重新获取" + count;
      countDown(count);
    }
  }, 1000);
}
function getUserPhone(e) {
  // 获取到回调信息，需要code(与登录login的code不同)
  console.log("回调返回的信息：", e);
  if (!checked.value) {
    return proxy.$toast("请勾选协议继续");
  }
  proxy
    .$request({
      url: "/api/user/getAccessToken",
      header: "application/x-www-form-urlencoded",
      data: {
        code: wxLoginForm.value.code,
        platform: "wechat",
      },
    })
    .then((res) => {
      console.log("res2222: ", res);
      if (res.code == 0) {
        return proxy.$toast(res.msg);
      } else if (res.code == 1) {
        access_token.value = res.data.access_token;
        console.log("access_token.value: ", access_token.value);
        getPhone(e.detail.code);
      } else {
        return proxy.$toast(res.msg);
      }
    })
    .catch(() => {
      console.log("登录失败");
    });
}
function getPhone(code) {
  proxy
    .$request({
      url: "/api/user/getuserphonenumber",
      header: "application/x-www-form-urlencoded",
      data: {
        access_token: access_token.value,
        code: code,
      },
    })
    .then((res) => {
      if (res.code == 0) {
        return proxy.$toast(res.msg);
      } else if (res.code == 1) {
        phoneNumber.value = res.data.phone_info.phoneNumber;
        show.value = false;
        sendCode();
        show2.value = true;
      }
    })
    .catch(() => {
      console.log("登录失败");
    });
  return false;
}
// 键盘
// 退格键
function backspace() {
  // 删除value的最后一个字符
  if (value.value.length) {
    value.value = value.value.substr(0, value.value.length - 1);
  }
  console.log(value.value);
}
function change(val) {
  if (value.value.length < 4) {
    value.value += val;
  }
  if (value.value.length == 4) {
    finish(value.value);
  }
}
const change2 = (e) => {
  console.log("change2e: ", e);
};
const finish = (e) => {
  console.log("e: ", e);
  proxy
    .$request({
      url: "api/user/mobilelogin",
      header: "application/x-www-form-urlencoded",
      data: {
        mobile: phoneNumber.value,
        captcha: e,
      },
    })
    .then((res) => {
      if (res.code == 0) {
        return proxy.$toast(res.msg);
      } else {
        // token
        show2.value = false;
        proxy.$toast("登录成功");
        uni.setStorageSync("token", res.data.userinfo.token);
        uni.setStorageSync("userinfo", res.data.userinfo);
        uni.reLaunch({
          url: "/pages/index/index",
        });
      }
    });
};
</script>

<style lang="scss" scoped>
.page {
  padding-top: 110rpx;
}
.wrap {
  padding-bottom: 24rpx;
  position: relative;
  .close-img {
    position: absolute;
    right: 32rpx;
    top: 32rpx;
    width: 32rpx;
    height: 32rpx;
  }
  .logo {
    margin: 0 auto;
    width: 148rpx;
    height: 148rpx;
    background: #ffffff;
    border-radius: 74rpx;
    border: 2rpx solid #cc5610;
    margin-bottom: 64rpx;
    .img {
      width: 122rpx;
      height: 64rpx;
    }
  }
  .btn {
    margin: 0 auto;
    width: 686rpx;
    height: 108rpx;
    background: linear-gradient(128deg, #ff9839 0%, #ff7139 100%);
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    font-weight: 800;
    font-size: 32rpx;
    color: #ffffff;
    line-height: 60rpx;
  }
  .xieyi {
    margin-left: 34rpx;
    margin-top: 72rpx;
    width: 204rpx;
    height: 44rpx;
    background: #fff1eb;
    border-radius: 22rpx 22rpx 22rpx 22rpx;
    font-weight: 400;
    font-size: 24rpx;
    color: #ff7139;
    line-height: 28rpx;
    position: relative;
    .jiao {
      position: absolute;
      bottom: -10rpx;
      left: 16rpx;
      width: 16rpx;
      height: 16rpx;
      background: #fff1eb;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      transform: rotate(45deg);
    }
  }
  .t-xieyi {
    margin-left: 34rpx;
    margin-top: 28rpx;
    .circle {
      width: 40rpx;
      height: 40rpx;
      border-radius: 20rpx;
      border: 2rpx solid #999999;
      margin-right: 16rpx;
      box-sizing: border-box;
    }
    .icon {
      border: none;
    }
    .text {
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      line-height: 33rpx;
      text-align: left;
      .t {
        color: #ff7139;
      }
    }
  }
  .other-login {
    margin-top: 66rpx;
    .item {
      flex: 1;
    }
    .icon {
      width: 100rpx;
      height: 100rpx;
      margin-bottom: 28rpx;
    }
    font-weight: 400;
    font-size: 28rpx;
    color: #333333;
    line-height: 33rpx;
  }
}
.wrap2 {
  padding-bottom: 24rpx;
  position: relative;
  .close-img {
    position: absolute;
    left: 32rpx;
    top: 52rpx;
    width: 32rpx;
    height: 32rpx;
  }
  .title {
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
    // line-height: 76rpx;
    text-align: center;
    margin-bottom: 30rpx;
  }
  .toast {
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    line-height: 76rpx;
  }
  .code-box {
    margin-top: 30rpx;
  }
}
</style>
